<template>
  <div class="box">
    <v-alert
      :value="error"
      type="error"
      :outlined="true"
      border="top"
      color="red lighten-2"
      dark
      class="saveClass"
    >
      {{
        flg === true ? '你必须先选择二级分类标签' : '该分类无需再标注二级标签'
      }}
    </v-alert>
    <div class="show-box">
      <div v-for="(item, index) in topLevel" :key="index" class="anno">
        <v-alert
          outlined
          :color="item.background_color"
          elevation="2"
          dismissible
          v-if="item.id === showId"
          colored-border
          transition="scale-transition"
          icon="mdi-firework"
          class="overfill"
          height="60"
        >
          {{ item.describe }}
        </v-alert>
      </div>
    </div>
    <div class="save">
      <v-alert
        text
        v-show="show"
        type="success"
        class="saveClass"
        >保存成功</v-alert
      >
    </div>
    <!-- <v-alert
      class="alert"
      border="right"
      colored-border
      type="error"
      elevation="2"
      dismissible
    >
      标签粉色代表可以不需要标注选择二级分类直接点击下一页
    </v-alert> -->
    <div class="btn">
      <v-btn
        class="btn-only"
        :class="{ active: btnIndex === index }"
        outlined
        @click="changeCss(item.text, index)"
        v-for="(item, index) in bigData"
        ref="btn"
        :key="index"
        >{{
          item.label_name !== null ? item.label_name.slice(0, 4) : ''
        }}</v-btn
      >
    </div>
    <v-radio-group class="radio" v-model="radioGroup" row>
      <v-radio
        :class="{ radioactive: radioIndex === index }"
        class="radio-box-setting"
        v-show="n.p_text === indexButton"
        v-for="(n, index) in topLevel"
        :key="n.id"
        :value="n.id"
        :color="n.background_color"
        :label="n.label_name"
        :light="true"
        @change="changeLables(n, index)"
        active-class="colorClass"
        v-shortkey="[n.suffix_key]"
        @shortkey="theAction(n)"
      >
        <template v-slot:label>
          <div class="item" :class="{ radioactive: n.slot_flg === false }">
            {{ n.label_name !== null ? n.label_name.slice(0, 6) : '' }}
          </div>
        </template>
      </v-radio>
    </v-radio-group>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapState, mapMutations, mapActions } from 'vuex'
import DocumentService from '@/services/document.service'
import LabelService from '@/services/label.service'
Vue.use(require('vue-shortkey'))
export default {
  props: {
    // 批量刪除chunks
    chunks: {
      type: Array
    },
    bigData: {
      type: Array
    },
    // 是否先选下面内个
    isChoose: {
      type: Array
    },
    currentId: {
      type: Object
    },
    topLevel: {
      type: Array,
      default: () => [],
      require: true
    },
    text: {
      type: String,
      default: '',
      required: true
    },
    labels: {
      type: Array,
      default: () => [],
      required: true
    },
    entities: {
      type: Array,
      default: () => [],
      required: true
    },
    deleteAnnotation: {
      type: Function,
      default: () => [],
      required: true
    },
    updateEntity: {
      type: Function,
      default: () => [],
      required: true
    },
    addEntity: {
      type: Function,
      default: () => [],
      required: true
    }
  },
  computed: {
    ...mapState('documents', ['items']),
    sortedEntities() {
      return this.entities
        .slice()
        .sort((a, b) => a.start_offset - b.start_offset)
    }
  },
  data() {
    return {
      radioGroup: null,
      codeStyle: {},
      suffix: ['3'],
      showId: null,
      show: false,
      error: false,
      item: [],
      labelButton: [],
      indexButton: '',
      isActive: false,
      btnIndex: null,
      flg: false,
      // radio index
      radioIndex: false,
      radioActive: false,
      documentId: null,
      // 点击白色按钮的时候
      writeButtonStatus: false
    }
  },
  methods: {
    ...mapMutations('labels', ['setInitialRadioStatus', 'setLoading']),
    ...mapMutations('documents', ['setLoading']),
    ...mapActions('labels', ['getInitialRadioStatus']),
    changeCss(item, index) {
      this.btnIndex = index
      this.isActive = true
      this.indexButton = item
    },
    async changeLables(item, index) {
      sessionStorage.setItem('radioStatus', item.slot_flg)
      console.log(item)
      // 点击红的 tree为false
      if (item.slot_flg === false) {
        this.error = false
      } else {
        this.writeButtonStatus = true
        this.$emit('changeWriteButton', this.writeButtonStatus)
      }
      // 判断 翻页
      // const flg = item.slot_flg
      // 2021.8.15  判断 不同情况下 是否可以翻页
      if (sessionStorage.getItem('radioStatus') === 'false') {
        localStorage.setItem('CHANGETOPLEVEL', 'DELETE || SELECT')
      } else {
        localStorage.removeItem('CHANGETOPLEVEL')
      }
      if (this.chunks.length <= 3 && sessionStorage.getItem('radioStatus') !== 'false') {
        localStorage.removeItem('alreadyTopLevel')
        localStorage.removeItem('TopLevel')
      }
      if (this.chunks.length > 1) {
        console.log(123)
        this.error = false
      }
      if (item.slot_flg === false) {
        this.radioIndex = index
        this.radioActive = true
      } else {
        this.radioActive = false
      }
      const that = this
      // 判斷刪除
      console.log(this.chunks)
      // 判断分页
      if (this.chunks.length > 1 && sessionStorage.getItem('radioStatus') !== 'false') {
        sessionStorage.setItem('chunkLength', true)
      } else {
        sessionStorage.setItem('chunkLength', false)
      }
      this.chunks.forEach((chunk) => {
        if (item.slot_flg === false) {
          console.log(chunk)
          if (chunk.id) {
            // 删除 如果是红的 就删除
            that.deleteAnnotation(chunk.id)
          }
          // 判断 接下来的点击事件 是否 能直接翻页
        }
      })
      this.item = item.id
      this.flg = item.slot_flg
      if (item.slot_flg === true) {
        localStorage.removeItem('alreadyTopLevel')
      }
      this.$emit('changeItem', this.radioGroup)
      // 选中红的
      this.$emit('changeFlag', item)
      // 在不同情况下保存radio
      console.log(item.id)
      console.log(this.currentId.id)
      // 2021.8.15 切换顺序
      const data = await DocumentService.getTopLevelLabel(this.currentId.id)
      const obj = data.data.data.label_id1
      const radioData = await DocumentService.getDocumentListLabels(
        item.id,
        this.currentId.id
      )
      console.log(radioData)
      if (obj && this.currentId.annotations.length > 3) {
      }
      if (item.slot_flg === false) {
        if (radioData.status === 200) {
          // 关闭 保存成功 因为 防止两个alert冲突 一开始就写了
          this.show = true
          setTimeout(() => {
            this.show = false
          }, 2000)
        }
      } else {
        // this.error = true
        // setTimeout(() => {
        //   this.error = false
        // }, 2000)
      }
      if (this.currentId.annotations.length > 0) {
        const data = await DocumentService.getDocumentListLabels(
          item.id,
          this.currentId.id
        )
        if (data.status === 200) {
          this.show = true
          setTimeout(() => {
            this.show = false
          }, 2000)
        }
        localStorage.setItem('TopLevel', data.data.message)
      } else {
        // this.error = true
        // setTimeout(() => {
        //   this.error = false
        // }, 2000)
      }
      if (this.flg) {
        // this.error = true
        // setTimeout(() => {
        //   this.error = false
        // }, 2000)
      }
      this.$emit('getBigLabel', item.id)
      this.showId = item.id
      // 2021.8.15 测试
      console.log(this.chunks.length)
      if (sessionStorage.getItem('radioStatus') !== 'false' && this.chunks.length >= 3) {
        // localStorage.setItem('alreadyTopLevel', '已经获取成功')
      }
    },
    theAction(item) {
      this.radioGroup = null
    }
  },
  async mounted() {
    sessionStorage.setItem('radioStatus', null)
    const dataBig = await LabelService.getLabelsBig()
    this.labelButton = dataBig.data.data
    console.log(this.labelButton)
    const data = await DocumentService.getTopLevelLabel(this.currentId.id)
    const obj = data.data.data.label_id1
    // 选中状态、
    const chooseStatus = data.data.data.slot_flg
    sessionStorage.setItem('radioStatus', chooseStatus)
    console.log(chooseStatus)
    this.$emit('chooseStatus', chooseStatus)
    if (obj && this.currentId.annotations.length > 0) {
      localStorage.setItem('alreadyTopLevel', '已经获取成功')
    }
    this.radioGroup = obj ?? null
    this.showId = obj ?? null
    this.documentId = data.data.data.pTextId
    // 中间变量 判断 和 按钮id相等
    let ooid = null
    this.labelButton.forEach((pid) => {
      if (pid.id === this.documentId) {
        // localStorage.setItem('alreadyTopLevel', '已经保存成功')
        ooid = pid
        // mounted 获取按钮 初始化状态
        if (this.$refs.btn[this.labelButton.indexOf(ooid)] !== undefined) {
          this.$refs.btn[this.labelButton.indexOf(ooid)].$refs.link.click()
        }
      }
    })
  },
  updated() {
    if (this.radioGroup !== 0 && this.currentId.annotations.length > 3) {
      localStorage.setItem('TopLevel', '修改成功')
    } else {
      localStorage.removeItem('TopLevel', '修改成功')
    }
    // if (sessionStorage.getItem('radioStatus') !== 'true') {
    //   localStorage.setItem('CHANGETOPLEVEL', 'DELETE || SELECT')
    // }
  },
  watch: {
    radioGroup: {
      handler(newValue, oldValue) {
        this.$emit('radioId', newValue)
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.anno {
  width: 39%;
  margin: 10px 10px 10px 0;
}
.alert {
  width: 39%;
  margin: 10px 10px 10px 0;
}
.save {
  height: 65px;
  margin: 10px 0;
  width: 39%;
}
.show-box {
  height: 60px;
  margin-bottom: 5px;
}
.btn {
  display: flex;
  flex-wrap: wrap;
}
.btn-only {
  margin: 0px 10px 10px 0px;
  width: 5vw;
}
.radioactive {
  color: rgb(255, 62, 136);
}
.radio {
  display: flex;
  justify-content: space-around;
}
.radio-box-setting {
  width: 9vw;
  margin: 5px 0;
  font-weight: bold;
}
</style>
